<template>
  <div class="font">
    <div class="user-box">
      <div class="box-top">
        <div class="box-img">
          <img src="../assets/logod.png">
        </div >
        <div class="box-text"><h2>单招信息查询</h2></div>
      </div>
      <div class="box-min">
        <div class="b-m-title"><h4>{{admissionitem.nickname}} <span >同学你好!</span> </h4></div>
        <div class='studentPhoTable'>
          <img v-show="admissionitem.number!==undefined" class="s-img" style="width: 150px;height: 200px;" :src="'http://andysama.work:8481/files/'+admissionitem.number" alt="照片">
        </div>
      </div>
      <div class="box-b">
        <el-button type="warning" @click="print" round>尚未考试，打印准考证</el-button>
        <el-button type="danger" @click="printPerformance" round>已考试，查看成绩</el-button>
      </div>
      <admissionCard :cardDialogVisible="cardDialogVisible" @close="close" :userIdCArd="admissionitem.idCard"/>
      <performance :performanceDialogVisible="performanceDialogVisible" @closePerformance="closePerformance" :userIdCArd="admissionitem.idCard"/>
    </div>
  </div>
</template>

<script>
import admissionCard from '../components/admission-card'
import performance from  '../components/performance'
import {admissionLogin} from "@/request/utils/admission";
import {informationGetByNumber} from "@/request/utils/information";

export default {
  name: "font",
  components:{
    admissionCard,
    performance
  },
  data() {
    return {
      admissionitem:{},
      cardDialogVisible: false,
      performanceDialogVisible: false,
      commonDialogVisible: false,
      text: {
        lod: '您的成绩是：',
        new: '暂无成绩请打印准考证'
      }
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    print() {
      const loading = this.$loading({
        lock: true,
        text: '查询您的信息中~',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.8)'
      });
      setTimeout(() => {
        this.cardDialogVisible = true;
       loading.close();
      }, 2000);

    },
    printPerformance() {
      const loading = this.$loading({
        lock: true,
        text: '查询您的信息中~',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.8)'
      });
      setTimeout(() => {
        this.performanceDialogVisible = true;
        loading.close();
      }, 1000);

    },
    close(){
      this.cardDialogVisible = false;
    },
    closePerformance(){
      this.performanceDialogVisible = false;
    },
    closeCommon(){
      this.commonDialogVisible = false;
    },
    informationUser(){

      const loading = this.$loading({
        lock: true,
        text: '查询您的信息中~',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.8)'
      });
      setTimeout(() => {
        informationGetByNumber(this.admissionitem.number).then(res=>{
          if(res.data!==null){
            loading.close();
            this.$router.push({
              path: '/performance',
              params:{
                informationItem: res.data
              },
              query:{
                number: this.admissionitem.number
              }
            })
          }else {
            loading.close();
            this.commonDialogVisible = true
          }

        })
      }, 1000);

    }
  },
  //生命周期 一 创建完成(可以访问当前this实例)
  created() {
    this.admissionitem = JSON.parse(localStorage.getItem("zjjuser")) ;
    console.log(this.admissionitem)
  },
  //生命周期 一 挂载完成(可以访问DOM元素)
  mounted() {

  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  },
}
</script>

<style scoped lang="less">
.font{

  width: 100vw;
  padding: 0;
  margin: 0;
  height: 100vh;
  font-size: 16px;
  background-position: left top;

  color: #fff;
  font-family: "Source Sans Pro";
  position: relative;
  .user-box{

    width: 600px;
    height: 700px;
    background: #4dbfff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 25px;
    padding: 50px 40px 40px 40px;
    box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
    opacity: 1;
    display: flex;
    flex-direction:column;
    justify-content:space-between;

    .box-top{

      .box-img{
        display: flex;
        justify-content: center;
      }
      .box-text{
        color: white;
        display: flex;
        justify-content: center;
        h2{
          display: inline-block;
          font-size: 35px;
          margin-top: 20px;
          letter-spacing: 15px;
        }
      }
    }

    .box-min{
      height: 40%;

      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 auto;
      margin-top: 40px;

      .b-m-title{
        font-size: 25px;
        color: black;
        letter-spacing: 5px;
        margin-left: 15px;
        span{
          margin-left: 10px;
        }
      }
      .studentPhoTable{
        margin-top: 20px;
        display: flex;
        justify-content: center;
        .s-img{

        }
      }
    }

    .box-b{
      margin-top: 50px;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>